<template>
  <div class="flights" v-if="flightInfo">
    <!-- 左侧 主要内容 -->
    <div class="flights_main">
      <!-- 筛选组件 -->
      <FlightFilter
        :fliterInfo="flightInfo.info"
        :filterOptions="flightInfo.options"
        @filterValueChange="filterValueChange"
      />
      <!-- 列表组件 -->
      <FlightList :flightList="pageList" />
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 右侧 其他 -->
     <div class="flights_aside">
      <div class="ensure">
        <div class="ensuer_content">
          <div class="ensure_item">
            <i class="iconfont iconweibiaoti-_huabanfuben"></i>
            <span>航协认证</span>
          </div>
          <div class="ensure_item">
            <i class="iconfont iconbaozheng"></i>
            <span>出行保证</span>
          </div>
          <div class="ensure_item">
            <i class="iconfont icondianhua"></i>
            <span>7*24</span>
          </div>
        </div>
        <div class="ensure_contact">免费客服电话：4006345678转2</div>
      </div>
      <!-- 历史 -->
      <div class="history">
        <div class="history_title">历史查询</div>
        <div class="history_content">
          <div class="history_item" v-for="(item,index) in history" :key="index">
            <div class="history_info">
              <div>{{item.departCity}} - {{item.destCity}}</div>
              <div>{{item.departDate}}</div>
            </div>
            <div class="history_btn" @click="selectHistory(item)" >选择</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex"
export default {
  computed:{
    ...mapState("air",["history"])
  },
  data() {
    return {
      // 机票数据返回值 大对象
      flightInfo: null,

      // 分页后的数组
      pageList: [],

      // 当前页码
      currentPage: 1,
      // 页容量数组
      pageSizes: [5, 10, 20, 30],
      // 页码条数
      pageSize: 5,
      // 功能
      layout: "total, sizes, prev, pager, next, jumper",
      // 总条数
      total: 0,
      // 用户筛选的条件  filterValues=["白云机场","3|6","东航","大"]
      filterValues: ["", "", "", ""],
    };
  },
   mounted() {
   this.flightInit()
  },
  watch:{
    "$route.fullPath":function(){
      this.flightInit()
    }
  },
  // 开始的条数：(当前页码-1)*页码条数  (1-1)*5  0
  // 结束的条数：当前页码*页码条数       1*5     5
  methods: {
    // 封装刷新数据
   async flightInit(){
       const res = await this.$axios.get("/airs", { params: this.$route.query });
       console.log(res);
       this.flightInfo = res;
       this.handlPageList();
    },
    // 封装对数组做分页处理
    handlPageList() {
      //  筛选后的值
      const list = this.flightInfo.flights.filter((flight) => {
        // 是否满足 起飞机场 筛选条件
        const airportValid =
          this.filterValues[0] === "" ||
          flight.org_airport_name === this.filterValues[0];

        // 是否满足 起飞时间 筛选条件
        let timeValid = this.filterValues[1] === "";
        if (!timeValid) {
          //  用户选过的时间筛选 12|13
          // 开始的总分钟
          const startMinutes = this.filterValues[1].split("|")[0] * 60;
          // 结束的总分钟
          const endMinutes = this.filterValues[1].split("|")[1] * 60;
          // 循环项机票中的总分钟数
          const minutes =
            flight.dep_time.split(":")[0] * 60 + +flight.dep_time.split(":")[1];

          // 判断看时间是否满足要求
          timeValid = minutes >= startMinutes && minutes <= endMinutes;
        }

        // 是否满足 航空公司 筛选条件
        const companyValid =
          this.filterValues[2] === "" ||
          flight.airline_name === this.filterValues[2];
        // 是否满足 机型大小 筛选条件
        const typeSizeValid =
          this.filterValues[3] === "" ||
          flight.plane_size === this.filterValues[3];

        return companyValid && airportValid && timeValid && typeSizeValid;
      });

      // 开始的条数
      const start = (this.currentPage - 1) * this.pageSize;
      // 结束的条数
      const end = this.currentPage * this.pageSize;
      // 对数组做分页处理
      this.pageList = list.slice(start, end);
      // 筛选后的总条数
      this.total = list.length;
      // console.log(this.pageList);
    },
    // 页容量大小改变事件
    handleSizeChange(size) {
      this.pageSize = size;
      // 重新刷新分页
      this.handlPageList();
    },
    // 当前页码值改变事件
    handleCurrentChange(currentPage) {
      // console.log('当前页码值改变事件');
      this.currentPage = currentPage;
      // 重新刷新分页
      this.handlPageList();
    },
    // 接收筛选组件传递过来的值
    filterValueChange(filterValues) {
      // console.log(filterValues);
      // filterValues=["白云机场","3|6","东航","大"]

      // 数据过滤 筛选
      /*
      1.先筛选再分页
        总数据  this.flightInfo.flights
        筛选条件  [] || ["白云机场"，“东航” ...]
      */

      this.filterValues = filterValues;
      this.currentPage = 1;
      this.handlPageList();
    },
    // 点击右侧历史记录选择事件
    selectHistory(item){
      // console.log(this.$route);
      // console.log(item);
      this.$router.push({path:"/air/flights",query:item})
    }
  },
};
</script>

<style lang="less" scoped>
.flights {
  width: 1000px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  .flights_main {
    width: 740px;
  }

  .flights_aside {
    width: 240px;
     padding-top: 10px;
    .ensure {
      border: 1px solid #ccc;
      .ensuer_content {
        display: flex;
        height: 80px;
        .ensure_item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          &:nth-child(2) {
            .iconfont {
              color: green;
            }
          }
          .iconfont {
            color: #409eff;
            font-size: 30px;
          }

          span {
            font-size: 13px;
          }
        }
      }

      .ensure_contact {
        background-color: #f6f6f6;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        font-size: 14px;
      }
    }
    .history {
      margin-top: 10px;
      border: 1px solid #ccc;
      .history_title {
        padding: 12px;
        font-size: 14px;
        border-bottom: 1px solid #ccc;
      }

      .history_content {
        .history_item {
          padding: 12px;
          display: flex;
          justify-content: space-between;
          height: 45px;
          align-items: center;
          .history_info {
            font-size: 18px;
            text-align: center;
            div:nth-child(1) {
            }
            div:nth-child(2) {
              color: #666;
              font-size: 12px;
            }
          }

          .history_btn {
            color: #fff;
            background-color: orange;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            width: 50px;
            height: 20px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>